<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone buttons-basic">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Basic buttons</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Normal</span>
        </li>
        <li *ngFor="let color of colors1" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-{{ color }}">
            Button
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disabled</span>
        </li>
        <li *ngFor="let color of colors1" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--raised button--colored-{{ color }}" disabled>
            Button
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone buttons-with-icons">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Buttons with icons</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Normal</span>
        </li>
        <li *ngFor="let item of buttonsWithIcons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-{{ item.color }}">
            <i class="material-icons">{{ item.icon }}</i>
            {{ item.action | titlecase }}
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disabled</span>
        </li>
        <li *ngFor="let item of buttonsWithIcons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-{{ item.color }}" disabled>
            <i class="material-icons">{{ item.icon }}</i>
            {{ item.action | titlecase }}
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone buttons-social">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Social buttons</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Normal</span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--{{ name }}">
            <i class="material-icons"></i>
            {{ name | titlecase }}
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disabled</span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--{{ name }}" disabled>
            <i class="material-icons"></i>
            {{ name | titlecase }}
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone buttons-icons">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Icon buttons</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Normal</span>
        </li>
        <li *ngFor="let item of iconButtons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect button--colored-{{ item.color }}">
            <i class="material-icons">{{ item.icon }}</i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Social</span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect button--{{ name }}">
            <i class="material-icons"></i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disabled</span>
        </li>
        <li *ngFor="let item of iconButtons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect button--colored-{{ item.color }}" disabled>
            <i class="material-icons">{{ item.icon }}</i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray"></span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect button--{{ name }}" disabled>
            <i class="material-icons"></i>
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone buttons-icons">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text"> Raised Icon buttons</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Normal</span>
        </li>
        <li *ngFor="let item of iconButtons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised mdl-js-ripple-effect button--colored-{{ item.color }}">
            <i class="material-icons">{{ item.icon }}</i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Social</span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised mdl-js-ripple-effect button--{{ name }}">
            <i class="material-icons"></i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disabled</span>
        </li>
        <li *ngFor="let item of iconButtons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised mdl-js-ripple-effect button--colored-{{ item.color }}" disabled>
            <i class="material-icons">{{ item.icon }}</i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray"></span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised mdl-js-ripple-effect button--{{ name }}" disabled>
            <i class="material-icons"></i>
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--7-col-tablet mdl-cell--4-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Buttons without background</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Basic button</span>
        </li>
        <li *ngFor="let color of colors1" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-js-ripple-effect color-text--{{ color }}">
            Button
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disabled</span>
        </li>
        <li *ngFor="let color of colors1" class="mdl-list__item">
          <button class="mdl-button mdl-js-button button--colored-{{ color }}" disabled>
            Button
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Button with icon</span>
        </li>
        <li *ngFor="let item of buttonsWithIcons" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-js-ripple-effect button--colored-{{ item.color }}">
            <i class="material-icons">{{ item.icon }}</i>
            {{ item.action | titlecase }}
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Social</span>
        </li>
        <li *ngFor="let name of socials" class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-js-ripple-effect button--{{ name }}">
            <i class="material-icons"></i>
            {{ name | titlecase }}
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--5-col-tablet mdl-cell--4-col-phone buttons-fab">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Fab button</h2>
    </base-card-title>
    <base-card-body>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Colored FAB</span>
        </li>
        <li class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
            <i class="material-icons">add</i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">With ripple</span>
        </li>
        <li class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
            <i class="material-icons">add</i>
          </button>
        </li>
      </ul>
      <ul class="mdl-list pull-left">
        <li class="mdl-list__item">
          <span class="text-color--gray">Disable</span>
        </li>
        <li class="mdl-list__item">
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" disabled>
            <i class="material-icons">add</i>
          </button>
        </li>
      </ul>
    </base-card-body>
  </base-card>
</div>

<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">How to use</h2>
    </base-card-title>
    <base-card-body>
      <p>
        To use button with color background, you need to use CSS class naming as the
        corresponding color in lowercase with prefix <code><b>button--colored-</b></code>.<br>
        If the color name is composed of more than one world, the words are separated by a dash "-".<br>
        You can see the names of the colors <a href="ui-colors.html">here</a>.
        <br><br>
        <i class="color-text--teal">Example: You want to use colored button with color naming "Teal". CSS class for this case is <code><b>.button--colored-teal</b></code></i>
        <br><br><br>
        To use social button, you need to use CSS class naming as the
        corresponding social network in lowercase with prefix <code><b>button--</b></code>.
        <br><br>
        <i class="color-text--teal">Example: You want to use Facebook button. CSS class for this case is <code><b>.button--facebook</b></code></i>
      </p>
    </base-card-body>
  </base-card>
</div>
